<template>
	<div>
		<home-header ></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
		<home-weekend :list="weekendList"></home-weekend>
	</div>
</template>

<script>
	import HomeHeader from './components/Header'
	import HomeSwiper from './components/Swiper'
	import HomeIcons from './components/Icons'
	import HomeRecommend from './components/Recommend'
	import HomeWeekend from './components/Weekend'
	import axios from 'axios'
	import {mapState} from 'vuex'
	export default {
		name: 'Home',	//定义本组件名称
		components: { //子组件注册
			HomeHeader,
			HomeSwiper,
			HomeIcons,
			HomeRecommend,
			HomeWeekend
		},
		data(){ //变量
			return {
				swiperList: [],
				iconList:[],
				recommendList:[],
				weekendList:[],
				lastCity:'',
			}
		},
		computed:{ //计算属性
			...mapState(['city'])
		},
		mounted(){ //每次加载页面执行
			this.lastCity=this.city
			this.getHomeInfo()
		},
		activated(){//每次重新显示页面执行
			if(this.lastCity!==this.city){
				this.lastCity=this.city
				this.getHomeInfo()
			}
		},
		methods:{ //方法
			getHomeInfo(){
				axios.get('/api/index.json?city='+this.city)
				.then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc(res){
				res=res.data
				if(res.ret && res.data){
					const data=res.data
					this.swiperList=data.swiperList
					this.iconList=data.iconList
					this.recommendList=data.recommendList
					this.weekendList=data.weekendList
				}
			},
			
		},
	}
</script>

<style>
</style>
